<!-- 限时秒杀 -->
<script setup>
import { reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getActivityPageApi, getActivityShopsApi } from '@/api/shop.js'
import { secondsUntilTargetTime, numberUnify } from '@/utils'
import { toast } from '@/uni_modules/uview-plus';
// 数据
const data = reactive({
  userId: '',
  activityList: [],
  list: [],
  active: 0,
})
onShow(() => {
  data.userId = uni.getStorageSync('userId');
  init()
})

function init() {
  getActivityPageApi({
  }).then(res => {
    console.log(res)
    const list = res.data
    list.forEach((item, i) => {
      const { startTime, endTime } = item
      const isRob = isCurrentTimeInRange(startTime, endTime)
      item.name = endTime.split(':')[0] + '点抢'
      if (isRob) {
        item.isRob = isRob
        // console.log('timeStr', timeStr)
        // 计算秒杀剩余时间
        item.timeData = secondsUntilTargetTime(endTime)
        // 定位当前活动位置
        console.log('active', i)
        data.active = i
      }
    })
    data.activityList = list
    getActivityGoodsList(list[data.active].id)
  })
}
// 获取活动商品列表
function getActivityGoodsList(configId) {
  getActivityShopsApi({
    configId,
    pageNo: 1,
    pageSIze: 100
  })
    .then(res => {
      const products = res.data.list
      products.forEach(product => {
        // const { startTimePoint, endTimePoint } = product
        // const isRob = isCurrentTimeInRange(startTimePoint, endTimePoint)
        // product.isRob = isRob
        product.declinePrice = numberUnify((product.marketPrice - product.seckillPrice) / 100)
        product.marketPrice = numberUnify(product.marketPrice / 100)
        product.seckillPrice = numberUnify(product.seckillPrice / 100)
      })
      data.list = products
    })
}
// 判断活动商品是否可抢
function isCurrentTimeInRange(startTime, endTime) {
  // 获取当前时间的时间戳
  const now = new Date();

  // 将当前日期和给定时间组合生成开始和结束时间的时间戳
  const [startHours, startMinutes, startSeconds] = startTime.split(":").map(Number);
  const [endHours, endMinutes, endSeconds] = endTime.split(":").map(Number);

  const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHours, startMinutes, startSeconds).getTime();
  const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHours, endMinutes, endSeconds).getTime();

  // 获取当前时间的时间戳
  const currentTime = now.getTime();

  // 判断当前时间是否在开始和结束时间之间
  return currentTime >= start && currentTime <= end;
}
// 当前活动时间结束
function onActivityend() {
  init()
}
// 校验是否用户已登录
const checkLogin = () => {
  if (data.userId === '') {
    goLoginPage()
    return false
  }
}
// 前往登录页面
function goLoginPage() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
// 切换其他时间数据
const changeTime = (index) => {
  console.log(index)
  data.active = index
  getActivityGoodsList(data.activityList[data.active].id)
}
// 前往商品详情页
const goDetailPage = (item) => {
  if (!data.activityList[data.active].isRob) return toast('当前活动未开始')
  checkLogin()
  uni.navigateTo({
    url: `/subPackage/shop/detail?id=${item.spuId}&type=1&activityId=${item.id}`
  })
}
</script>

<template>
  <view class="flashSale-page">
    <view class="head">
      <up-scroll-list :indicator="false">
        <view v-for="(item, i) in data.activityList" :key="item.id" class="item"
          :class="data.active == i ? 'active' : ''" @click="changeTime(i)">
          <text class="up-line-1">{{ item.name }}</text>
          <view v-if="item.isRob" class="time-box">
            <image style="width: 20rpx; height: 20rpx" src="/static/images/icons/clock.png" mode="scaleToFill" />
            <up-count-down :time="item.timeData" format="HH:mm:ss" @finish="onActivityend"></up-count-down>
          </view>
        </view>
      </up-scroll-list>
    </view>
    <view class="list">
      <view class="item" v-for="item in data.list" :key="item">
        <view class="info-box">
          <!-- 产品图片 -->
          <view class="img-box">
            <image style="width: 202rpx; height:202rpx;" :src="item.picUrl" mode="widthFix" />
          </view>
          <!-- 商品信息 -->
          <view class="info">
            <!-- 降价多少 -->
            <view class="decline-price">
              <image style="width: 20rpx;height: 20rpx;" src="/static/images/icons/price_decline.png"
                mode="scaleToFill" />
              <text class="price">直降 ¥{{ item.declinePrice }} </text>
            </view>
            <!-- 商品名称 -->
            <view class="name">
              <text>{{ item.spuName }}</text>
            </view>
            <!-- 原价 -->
            <view class="original-price">
              <text class="price">优惠前¥{{ item.marketPrice }} </text>
            </view>
            <!-- 现价 -->
            <view class="present-price">
              <text class="price">¥{{ item.seckillPrice }} </text>
            </view>
          </view>
        </view>
        <view class="btn-box"
          :class="data.activityList[data.active] && !(data.activityList[data.active].isRob) ? 'disabled' : ''"
          @click="goDetailPage(item)">
          抢
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.flashSale-page {
  &>.head {
    padding-left: 30rpx;
    margin-top: 40rpx;

    & .item {
      margin-right: 20rpx;
      box-sizing: border-box;
      padding: 0 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 140rpx;
      height: 96rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #999999;
      border-radius: 10rpx;
      border: 2rpx solid #979797;

      & .time-box {
        display: flex;
        align-items: center;
        justify-content: center;

        &::v-deep .u-count-down {
          margin-left: 4rpx;
          margin-bottom: 7rpx;

          & .u-count-down__text {
            font-weight: 500;
            font-size: 20rpx;
            color: #FB1A30;
            line-height: 28rpx;
          }
        }
      }

      &.active {
        color: #333333;
        border: 2rpx solid #333333;
      }
    }
  }

  // 列表
  & .list {
    padding: 0 30rpx;
    padding-top: 36rpx;
    padding-bottom: 60rpx;

    & .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40rpx;

      // 左边
      & .info-box {
        display: flex;

        // 商品图片
        & .img-box {
          width: 202rpx;
          height: 202rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }

        // 商品信息
        & .info {
          margin-left: 30rpx;

          // 降价多少
          & .decline-price {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 164rpx;
            height: 40rpx;
            font-weight: 400;
            font-size: 20rpx;
            color: #FF1504;
            background: #FFEEED;
            border-radius: 4rpx;
          }

          // 商品名称
          & .name {
            margin-top: 20rpx;
            font-weight: 500;
            font-size: 30rpx;
            color: #333333;
          }

          // 原价
          & .original-price {
            margin-top: 20rpx;
            font-weight: 400;
            font-size: 20rpx;
            color: #666666;
            text-decoration-line: line-through;
          }

          // 现价
          & .present-price {
            margin-top: 10rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
        }
      }

      // 右边 --按钮
      & .btn-box {
        width: 110rpx;
        height: 94rpx;
        line-height: 94rpx;
        background: #191919;
        border-radius: 10rpx;
        font-size: 36rpx;
        color: #FFC870;
        text-align: center;

        &.disabled {
          color: #BFBFBF;
          background: #F5F5F5;
        }
      }
    }
  }
}
</style>